import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

class ButtonDemo extends StatefulWidget {
  const ButtonDemo({Key? key}) : super(key: key);

  @override
  State<ButtonDemo> createState() => _ButtonDemoState();
}

class _ButtonDemoState extends State<ButtonDemo> {
  String _dropValue = "语文";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("button 配置"),
      ),
      // 线性布局
      body: ListView(
        children: [
          MaterialButton(
            // 按钮背景
            color: Colors.blue,
            onPressed: (){},
            child: Text("按钮"),
            // 按钮按下时回调 value = true
            // 按钮抬起时回调 value = false
            onHighlightChanged: (value){
              print("按钮点击Hight $value");
            },
            textColor: Colors.deepOrange, // 文本颜色
            highlightColor: Colors.deepPurple, // 按钮点击下的颜色
            disabledColor: Colors.yellow, // 未设置点击是颜色
            splashColor: Colors.green, // 水波纹的颜色
            elevation: 10.0, // 阴影
            // 用来设置按钮边框的样式
           // Border.all(color: Colors.deepOrange,width: 2.5,style: BorderStyle.solid),
           // 用来设置底部边框的
           // UnderlineInputBorder(borderSide: BorderSide(color: Colors.deepOrange,width: 2.5,style: BorderStyle.solid))
           // 设置圆角矩形边框
           //RoundedRectangleBorder(side: BorderSide.none,borderRadius: BorderRadius.all(Radius.circular(20)))
           // 圆形边框
            //CircleBorder(side: BorderSide(width: 2,color: Colors.red))
           shape: Border.all(color: Colors.deepOrange,width: 2.5,style: BorderStyle.solid),
           height: 44.0,
           minWidth: 140,

          ),
          SizedBox(height: 10,),
          Text("RaisedButton是一个material风格”凸起“的按钮，基本用法："),
          RaisedButton(
            onPressed: (){},
            child: Text("RaisedButton"),
          ),
          SizedBox(height: 10,),
          Text("FlatButton是一个扁平的按钮："),
          FlatButton(
            child: Text('FlatButton'),
            color: Colors.blue,
            onPressed: () {},
          ),
          SizedBox(height: 10,),
          Text("OutlineButton 是一个带边框的按钮，用法和RaisedButton一样"),
          OutlinedButton(
            child: Text('FlatButton'),
            onPressed: () {},
          ),
          SizedBox(height: 10,),
          Text("DropdownButton为下拉选择按钮"),
          DropdownButton(
            value: _dropValue,
            hint: Text('请选择'),
           // items是点击时弹出选项
            items: [
              DropdownMenuItem(child: Text("语文"),value: '语文',),
              DropdownMenuItem(child: Text("数学"),value: '数学',),
              DropdownMenuItem(child: Text("英语"),value: '英语',),
            ], 
            //onChanged选项发生变化时回调
            onChanged: (value){
              setState(() {
                _dropValue = value as String;
              });
            }),
          SizedBox(height: 10,),
          Text("IconButton是一个图标按钮"),
          IconButton(
            onPressed: (){}, 
            icon: Icon(Icons.person),
            tooltip: '这是一个图标按钮',
            color: Colors.red,
            iconSize: 30,
          ),
          SizedBox(height: 10,),
          Text("BackButton是一个material风格的返回按钮，本身是一个IconButton，点击时默认执行Navigator.maybePop即如果路由栈有上一页则返回到上一页"),
          BackButton(),

          SizedBox(height: 10,),
          Text("CloseButton适用于弹出的Dialog"),
          CloseButton(),

          SizedBox(height: 10,),
          Text("案例1"),

          Container(
            padding: EdgeInsets.all(14),
            child: Column(
              crossAxisAlignment:CrossAxisAlignment.start,
              children: [
                Container(
                  margin: EdgeInsets.only(left: 2),
                  child: Text(
                    "企业征信报告上传",
                    style: TextStyle(
                      fontSize: 14,
                      color:Colors.black12
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(left: 2,top: 4,bottom: 16),
                  child: Text(
                    "支持上传CSV、XLSX格式",
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.black87,
                    ),
                  ),
                ),
                SizedBox(
                  width: double.infinity,
                  child: OutlinedButton.icon(
                    onPressed: (){}, 
                    icon: Icon(
                      Icons.add,
                      color: Colors.blue,
                      ), 
                    label: Text(
                      "上传附件",
                      style: TextStyle(
                        fontSize: 14,
                        color: Colors.blue,
                      ),
                    ),
                    style: OutlinedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                      side: BorderSide(
                        width:1,
                        color: Colors.blue,
                      )
                    ),
                  ),
                )
              ],
            ),
          ),
           SizedBox(height: 10,),
            Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
              child: ElevatedButton(
                onPressed: () {
                  
                },
                child: const Text(
                  '保存并分析',
                  style: TextStyle(fontSize: 16),
                ),
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8))),
                    padding: MaterialStateProperty.all(
                        const EdgeInsets.symmetric(vertical: 12)),
                    backgroundColor: MaterialStateProperty.all(
                       Colors.blue)),
              ),
            )


        ],
      ),
    );
    
  }
}